<template>
  <div class="flex">
    <div class="header-title mb-4">欧英代产品信息</div>
    <div
      class="text-[#3487ff] ml-4 cursor-pointer"
      @click="onAutoFill"
      v-if="handleType != 'view' && type == 'product'"
    >
      自动填充
    </div>
  </div>
  <el-form
    ref="formRef"
    :model="form"
    label-align="right"
    label-width="120"
    size="default"
    :label-position="handleType == 'view' ? 'left' : 'top'"
    :class="handleType == 'view' ? 'view' : ''"
    v-loading="loading"
    element-loading-text="获取中"
  >
    <el-row :gutter="21">
      <el-col :span="12">
        <el-form-item label="Lot number:">
          <template v-if="handleType == 'view'">
            {{ form.lot_number }}
          </template>
          <el-input v-else v-model="form.lot_number" placeholder="请输入产品批号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Product name:" required>
          <template v-if="handleType == 'view'">
            {{ form.product_name }}
          </template>
          <el-input v-else v-model="form.product_name" placeholder="请输入产品认证名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="serial number:">
          <template v-if="handleType == 'view'">
            {{ form.serial_number }}
          </template>
          <el-input v-else v-model="form.serial_number" placeholder="请输入产品序列号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="model:">
          <template v-if="handleType == 'view'">
            {{ form.model }}
          </template>
          <el-input v-else v-model="form.model" placeholder="请输入产品型号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="applicable age:">
          <template v-if="handleType == 'view'">
            {{ form.applicable_age }}
          </template>
          <el-input v-else v-model="form.applicable_age" placeholder="请输入适用地区" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Working voltage:">
          <template v-if="handleType == 'view'">
            {{ form.working_voltage }}
          </template>
          <el-input v-else v-model="form.working_voltage" placeholder="请输入产品电压" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="供应商英文名（欧英代):" label-width="180">
          <template v-if="handleType == 'view'">
            {{ form.supplier_name_en }}
          </template>
          <el-input
            v-else
            v-model="form.supplier_name_en"
            placeholder="请输入供应商英文名（欧英代)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="供应商英文地址(欧英代):" label-width="180">
          <template v-if="handleType == 'view'">
            {{ form.supplier_addr_province }} {{ form.supplier_addr_city }}
            {{ form.supplier_addr_area }} {{ form.supplier_addr_en }}
          </template>
          <template v-else>
            <VGroup class="w-full">
              <el-input
                class="w-40"
                v-model="form.supplier_addr_province"
                placeholder="省"
              />
              <el-input class="w-40" v-model="form.supplier_addr_city" placeholder="市" />
              <el-input class="w-40" v-model="form.supplier_addr_area" placeholder="区" />
              <el-input
                v-model="form.supplier_addr_en"
                placeholder="请输入供应商英文地址(欧英代)"
              />
            </VGroup>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup name="TradeAgent">
import { reactive, toRefs } from "vue";
import { translation, getSupplierDetail } from "@/api/index.js";
import { ElMessage } from "element-plus";

let formData = reactive(inject("form")) || null;

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
  handleType: {
    type: String,
    default: "edit",
  },
  type: {
    type: String,
    default: "product",
  },
});

const data = reactive({
  loading: false,
});

const { loading } = toRefs(data);

const { info, handleType } = toRefs(props);

const form = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});

const formRef = ref();
// 自动填充
const onAutoFill = async (type = "handle") => {
  if (!info.value.supplier_id) {
    ElMessage.warning("请先选择供应商");
    return;
  }
  loading.value = true;
  try {
    const res = await getSupplierDetail({
      s_id: info.value.supplier_id,
    });

    const { basic } = res.data;
    // handle 主动点击触发， auto 选择供应商后自动触发
    if (type == "handle") {
      form.value.model = formData.value?.specification_model;
      form.value.product_name = info.value.customs_en_name;
      form.value.supplier_name_en = basic.supplier_en_name;
      form.value.supplier_addr_province = basic.province_en_name;
      form.value.supplier_addr_city = basic.city_en_name;
      form.value.supplier_addr_area = basic.district_en_name;
      form.value.supplier_addr_en = basic.english_address;
      if (info.value.battery_voltage) {
        form.value.working_voltage =
          Math.floor(Number(info.value.battery_voltage)) +
          info.value.battery_voltage_unit;
      }
    } else {
      form.value.model = form.value.model || formData.value?.specification_model;
      form.value.product_name = form.value.product_name || info.value.customs_en_name;
      form.value.supplier_name_en = form.value.supplier_name_en || basic.supplier_en_name;
      form.value.supplier_addr_province =
        form.value.supplier_addr_province || basic.province_en_name;
      form.value.supplier_addr_city = form.value.supplier_addr_city || basic.city_en_name;
      form.value.supplier_addr_area =
        form.value.supplier_addr_area || basic.district_en_name;
      form.value.supplier_addr_en = form.value.supplier_addr_en || basic.english_address;
      if (info.value.battery_voltage) {
        form.value.working_voltage =
          Math.floor(Number(info.value.battery_voltage)) +
          info.value.battery_voltage_unit;
      }
    }

    loading.value = false;
  } catch (e) {
    loading.value = false;
    throw Error(e);
  }
};

const getEnglishName = async (val) => {
  let param = {
    target_lang: "en",
    text: val,
    use_proxy: true,
  };
  try {
    const response = await translation(param);
    return response.data;
  } catch (error) {
    console.error("Error during translation:", error);
    throw error; // 可以根据实际情况决定是否需要重新抛出错误
  }
};

defineExpose({ onAutoFill });
</script>
<style scoped lang="scss">
:deep(.el-form-item--default) {
  margin-bottom: 5px;
}
.view {
  .el-form-item {
    width: 100% !important;
  }
  .flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :deep(.el-form-item__label) {
    color: #999999;
    font-weight: 400;
  }
}
</style>
